<template>
<view :class="{'light':theme=='light'}">
	<view class="v-time-box">
		Time : {{startTime}} - {{endTime}}
	</view>
	<view class="plr10 ptb10">
		<view class="v-header-top">
			<h3 class="v-h3">{{$t('market.c2')}}</h3>
			<h1 class="v-h1">{{saleAmount}} IOT</h1>
			<h3 class="v-h3">{{$t('market.c6')}}</h3>
			<view class="v-text-box uni-padding-wrap uni-common-mt">
				<view class="uni-flex uni-row">
					<view class="flex-item">1 IOT =</view>
					<view class="v-text">{{converNumData[0]}} USDT</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="flex-item">1 IOT =</view>
					<view class="v-text">{{converNumData[0]}} BTC</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="flex-item">1 IOT =</view>
					<view class="v-text">{{converNumData[0]}} ETH</view>
				</view>
			</view>
		</view>
		<view class="v-form-box">
			<h3 class="v-h3">{{$t('market.c7')}}</h3>
			<view class="v-text-box uni-padding-wrap uni-common-mt">
				<view class="uni-flex uni-row">
					<view class="flex-item">{{$t('market.c30')}}</view>
					<view class="v-text">
						<view class="v-radio-group">
							<radio-group @change="checkboxChange">
								<label class="" v-for="item in citySelectList" :key="item.value">
									<label>
										<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
									</label>
									<label>{{item.name}}</label>
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="flex-item">
						<view class="b-radius van-cell van-field" style="color: rgb(0, 0, 0);">
							<view class="van-field__body">
								<input type="text" v-model="valueInput" style="height: 35px;width: 100%;background-color: rgb(2, 60, 82);" class="van-field__control" @input="onKeyInput" placeholder="Please input the subscription amount" />
							</view>
						</view>
					</view>
					<view class="v-text">
						<h4 class="v-h4">{{modelSelect}}</h4>
						<h4 class="v-h4" style="color: #007aff;" @click="onAllInClick">All In</h4>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="flex-item">
						{{$t('market.c8')}}
					</view>
					<view class="v-text">{{balance}} {{modelSelect}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="flex-item">
						{{$t('market.c9')}}
					</view>
					<view class="v-text">{{valueInputCount}} IOT</view>
				</view>
				<button type="primary" class="v-btn-box" @click="onStartClick">{{$t('market.c10')}}</button>
			</view>
		</view>
		
		<view class="v-table-box">
			<h3 class="v-h3">{{$t('market.c7')}}</h3>
			<view class="v-table-none" v-if="tableDataList === []">
				<image src="/static/image/ieo_none.png" class="v-img"></image>
				<view class="v-text">{{$t('market.c13')}}</view>
			</view>
			<view class="v-table" v-else>
				<view class="uni-flex uni-row">
					<view class="flex-item">{{$t('market.c14')}}</view>
					<view class="flex-item">{{$t('market.c16')}}</view>
					<view class="flex-item">{{$t('market.c17')}}</view>
				</view>
				<view class="uni-flex uni-row" v-for="(item, i) in tableDataList" :key="i">
					<view class="flex-item">{{item.createTime}}</view>
					<view class="flex-item">{{item.amount}}</view>
					<view class="flex-item">{{item.symbol}}</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return{
				startTime: 0,
				endTime: 0,
				more:this.$t('home').up,
				modelSelect: 'BTC',
				valueInput: '',
				balance: 0,
				valueInputCount: 0,
				citySelectList: [],
				converNumData: [],
				tableDataList: [],
				saleAmount: 0,
			}
		},
		components: {},
		onLoad() {
			var token = uni.getStorageSync('token');
			// console.log(token)
			if (token) {
				this.loadIeoInfo();
				this.getWallet();
				this.loadIeoTable();
			} else {
				uni.reLaunch({
					url: '/pages/mine/login'
				})
			}
		},
		computed:{
		   ...mapState(['theme']),
		},
		onShow() {
		    this.$utils.setThemeTop(this.theme)
		},
		methods: {
			onAllInClick() {
				const _that = this;
				_that.valueInput = _that.balance;
				_that.onKeyInput()
			},
      checkboxChange(e) {
				let _that = this;
				let token = uni.getStorageSync('token');
				if (token) {
					_that.valueInputCount = 0;
					_that.valueInput = '';
					_that.modelSelect = e.target.value;
					_that.getWallet();
					// console.log(e.target.value)
				}
      },
			// 币种信息
			getWallet() {
				uni.showLoading({title: 'Loading',mask:true});
				this.$utils.initDataToken({ url: 'uc/asset/wallet/'+ this.modelSelect, data:{}, type:'post' }, (res,msg) => {
					let resp = res;
					this.balance = resp.balance;
					uni.hideLoading();
				});
			},
			// 列表
			loadIeoInfo() {
				let _that =this;
				let param = {};
				this.$utils.initDataToken({ url: 'uc/asset/fastInfo', data: {}, type:'post'}, (res, msg) => {
					// console.log(res)
					let resp = res;
					if (resp) {
						let converNums = []
						let selectList = resp.symbolList;
						selectList.forEach( el => {
						  el.value = el.symbol;
						  el.name = el.symbol;
						  if(el.symbol === 'BTC') el.checked = true

						  //换算汇率
						  let wgp = (el.symbolPrice / el.price).toFixed(8);
						  let num = (1 * wgp).toFixed(8);
						  let converNum = (el.price / num).toFixed(8);
						  converNums.push(converNum)

						});
						this.citySelectList = selectList;
						this.converNumData = converNums;
						this.saleAmount = resp.ieoEmption.saleAmount;
						this.endTime = resp.ieoEmption.endTime;
						this.startTime = resp.ieoEmption.startTime;
					}
				});
			},
			onKeyInput(event) {
				let _that = this;
				let input = _that.valueInput;
				let balance = _that.balance;
				let selectList = _that.citySelectList;
				if (input <= balance) {
					if (input != 0) {
					  selectList.forEach( el => {
						//换算汇率
						if (el.value === _that.modelSelect) {
						  let wgp = (el.symbolPrice / el.price).toFixed(8);
						  let num = (input * wgp).toFixed(8);
						  // let converNum = (el.price / num).toFixed(8);
						  _that.valueInputCount = num;
						}
					  });
					}
				} else {
					_that.valueInputCount = 0;
					_that.valueInput = '';
				}
				// this.valueInput = event.target.value
			},
			onStartClick() {
				let _that = this;
				if (_that.valueInput != '') {
					this.$utils.initDataToken({ url: 'uc/asset/fastInfo/exchange',data:{
						symbol:this.modelSelect,
						amount:this.valueInput,
					}}, (res,msg) => {
						// uni.stopPullDownRefresh()
						let resp = res;
						if(resp.code === 0){
							_that.valueInputCount = 0;
							_that.valueInput = '';
							this.$utils.showLayer('success');
						}else{
							this.$utils.showLayer('fail');
						}
					});
				}else{
					this.$utils.showLayer('fail');
				}
			},
			loadIeoTable() {
				let _that = this;
				let params = {
					pageNo: 1,
					pageSize: 10,
					startTime: '',
					endTime: '',
					memberId: 0,
					symbol: '',
					type: 28
				};
				this.$utils.initDataToken({ url: 'uc/asset/transaction', data:params}, (res,msg) => {
					// uni.stopPullDownRefresh()
					let resp = res;
					_that.tableDataList = resp.content;
					// console.log(resp)
				});
				
			}
		},
		onPullDownRefresh() {
		}
	}
</script>

<style>
.v-time-box {
	padding: 15px;
	color: #fff;
	background-color: #2160EC;
}
.van-cell, .van-cell__value--alone, .van-checkbox__label, .van-field__label, .light uni-input {
    color: #fff!important;
}
.van-cell {
    background-color: unset!important;
}
.v-header-top {
	padding: 15px 0;
}
.v-header-top .v-h1 {
	padding: 15px 0;
}
.v-header-top .v-h3:nth-child(3) {
	padding-top: 15px;
	border-top: 1px solid rgba(241, 241, 241, 0.6);
}
.v-text-box {padding: 0;}
.v-text-box .uni-row {
	padding: 10px 0;
	align-items: center;
}
.v-text-box .flex-item, .v-table-box .flex-item{
	flex: 1;
}
.v-form-box {
	padding-top: 15px;
	border-top: 1px solid rgba(241, 241, 241, 0.6);
}
.v-form-box .uni-row {
	padding: 15px 0;
}
.v-form-box .v-text {
	min-width: 80px;
	text-align: right;
}
.v-form-box .v-h4 {
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
}
.v-btn-box {
	margin: 30px 0 20px;
}

.v-table-box {
	padding: 5px 0 10px;
	border-top: 1px solid rgba(241, 241, 241, 0.6);
}
.v-table-box .uni-flex {
	padding: 15px 0;
	align-items: center;
	border-top: 1px solid rgba(241, 241, 241, 0.6);
}
.v-table-box .uni-flex:nth-child(1) {border-top: initial;}
.v-table-box .flex-item {
	text-align: center;
}
.v-table-box .v-h3 {
	padding: 10px 0;
}
.v-table-box .v-table-none {text-align: center;}
.v-table-box .v-table-none .v-img {
	display: block;
	width: 80px;
	height: 80px;
	margin: 15px auto 5px;
}
.v-table-box .v-table-none .v-text {
	padding: 15px 0;
}


</style>
